<template>
  <div>
    <svg height="700" width="700">
      <circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40" stroke-linecap="round"></circle>
      <circle transform="rotate(-90,350,350)" cx="350" cy="350" r="300" fill="none" stroke="green" stroke-width="40"
      stroke-linecap="round" stroke-dasharray="1000, 10000">
        <animate attributeName="stroke-dasharray" from="0, 10000" to="2000, 10000" dur="5s" repeatCount="indefinite"></animate>

      </circle>
      <text x="350" y="350" class="text">加载中...</text>
    </svg>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.text{
  fill:purple;
  font-size: 72px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline:middle;
}
</style>